import { FeatureManager } from '@amcax/base';
import { cmdFitView } from '@app-cad-env/nextcad/commands/feature/cmd-fit-view';
import { cmdChangeColor } from '@app-cad/common/commands/cmd-change-color';
import {
  cmdBackView,
  cmdBottomView,
  cmdFrontView,
  cmdIsometricView,
  cmdLeftView,
  cmdRightView,
  cmdTopView,
} from '@app-cad/common/commands/cmd-view-classification';
import React, { useEffect } from 'react';
import {
  cmdPanView,
  cmdRotateView,
  cmdZoomView,
  KEYBOARD_VIEW,
} from '../../../../common/commands/cmd-toolbar-mouse-control';
import {
  SplitToolButton,
  ToolButton,
} from '../../../../common/components/toolbar-components';
import { userEvents } from '../../../../module';
import {
  cmdSectionView,
  SectionViewActivatedEvent,
} from '../../commands/cmd-section-view';

export function ToolBar() {
  const [sectionViewActivated, setSectionViewActivated] = React.useState(false);
  const [isViewControlActive, setIsViewControlActive] = React.useState(false);

  useEffect(() => {
    const abortController = new AbortController();
    userEvents.on(
      SectionViewActivatedEvent,
      (val) => {
        cmdSectionView.activated = val;

        setSectionViewActivated(val);
      },
      abortController.signal,
    );
    userEvents.on(
      KEYBOARD_VIEW,
      ({ isSelected }) => {
        if (isSelected) {
          setIsViewControlActive(true);
        } else {
          setIsViewControlActive(false);
        }
      },
      abortController.signal,
    );

    return () => abortController.abort();
  }, []);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
        gap: 8,
        padding: 4,
      }}
    >
      <ToolButton cmd={cmdFitView} />

      {FeatureManager.isFeatureEnabled('product-section-view') ? (
        <ToolButton
          cmd={cmdSectionView}
          activated={sectionViewActivated}
        />
      ) : null}

      {FeatureManager.isFeatureEnabled('view-classification') ? (
        <SplitToolButton
          cmds={[
            cmdIsometricView,
            cmdFrontView,
            cmdBackView,
            cmdLeftView,
            cmdRightView,
            cmdTopView,
            cmdBottomView,
          ]}
        />
      ) : null}

      {FeatureManager.isFeatureEnabled('toolBar-view') ? (
        <SplitToolButton
          activated={isViewControlActive}
          cmds={[cmdPanView, cmdRotateView, cmdZoomView]}
        />
      ) : null}

      {FeatureManager.isFeatureEnabled('change-color') && (
        <ToolButton cmd={cmdChangeColor} />
      )}
    </div>
  );
}
